<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader />

    <div id="grid">
      <!--
        <div id="signup">
            <h3>注册账号</h3>
            <form>
                <div class="form-elem">
                    <span>账号：</span> 
                    <input v-model="signupName" type="text" placeholder="输入用户名">
                </div>
                <div class="form-elem">
                    <span>密码：</span> 
                    <input v-model="signupPwd" type="password" placeholder="输入密码">
                </div>
                <div class="form-elem">
                    <button v-on:click.prevent="signup">注册</button>
                </div>
            </form>
        </div>
        -->
      <div id="signin">
        <h3>登录账号</h3>
        <form>
          <div class="form-elem">
            <span>账号：</span>
            <input v-model="signinName" type="text" placeholder="输入用户名" />
          </div>

          <div class="form-elem">
            <span>密码：</span>
            <input v-model="signinPwd" type="password" placeholder="输入密码" />
          </div>

          <div class="form-elem">
            <button v-on:click.prevent="signin">登录</button>
          </div>
        </form>
      </div>
    </div>

    <BlogFooter />
  </div>
</template>

<script>
import axios from "axios";
import BlogHeader from "@/components/BlogHeader.vue";
import BlogFooter from "@/components/BlogFooter.vue";

export default {
  name: "Login",
  components: { BlogHeader, BlogFooter },
  data: function() {
    return {
      signupName: "",
      signupPwd: "",
      signupResponse: null,
      signinName: "",
      signinPwd: "",
    };
  },
  methods: {
    signup() {
      const that = this;
      axios
        .post("/api/user/", {
          username: this.signupName,
          password: this.signupPwd,
        })
        .then(function(response) {
          that.signupResponse = response.data;
          alert("用户注册成功，快去登录吧！");
          // 注册成功后回到博客首页
          that.$router.push({ name: "Home" });
        })
        .catch(function(error) {
          if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            //console.log(error.response.data);
            console.log(error.response.status);
            //console.log(error.response.headers);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", error.message);
          }
          //console.log(error.config);
          console.log("用户名已存在！");
          alert("用户名已存在！");
        });
    },

    signin() {
      const that = this;
      axios
        .post("/api/token/", {
          username: that.signinName,
          password: that.signinPwd,
        })
        .then(function(response) {
          const storage = localStorage;
          // Date.parse(...) 返回1970年1月1日UTC以来的毫秒数
          // Token 被设置为1分钟，因此这里加上60000毫秒
          const expiredTime = Date.parse(response.headers.date) + 60000;
          // 设置 localStorage
          storage.setItem("access.myblog", response.data.access);
          storage.setItem("refresh.myblog", response.data.refresh);
          storage.setItem("expiredTime.myblog", expiredTime);
          storage.setItem("username.myblog", that.signinName);
          // 是否为管理员
          axios
            .get("/api/user/" + that.signinName + "/")
            .then(function(response) {
              storage.setItem("isSuperuser.myblog", response.data.is_superuser);
              // 路由跳转
              // 登录成功后回到博客首页
              that.$router.push({ name: "Home" });
            });
        })
        .catch(function(error) {
          if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            //console.log(error.response.data);
            console.log(error.response.status);
            //console.log(error.response.headers);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", error.message);
          }
          //console.log(error.config);
          console.log("用户名或密码有误！");
          alert("用户名或密码有误！");
        });
    },
  },
};
</script>

<style scoped>
#signin {
  text-align: center;
  padding-left: 620px;
}
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#signup {
  text-align: center;
}
.form-elem {
  padding: 10px;
}
input {
  height: 25px;
  padding-left: 10px;
}
button {
  height: 35px;
  cursor: pointer;
  border: none;
  outline: none;
  background: gray;
  color: whitesmoke;
  border-radius: 5px;
  width: 60px;
}
button:hover {
  background: lightskyblue;
}
</style>
